<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>购买置换卡</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="viewport" content="width=750, minimum-scale=0.4, target-densitydpi=device-dpi,user-scalable=no,">
    <link rel="stylesheet" type="text/css" href="../../css/m.jui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/all.css" />
    <link href="../../css/swiper.min.css" rel="stylesheet">
	<style>
		.swiper-pagination-bullet{
			width: 16px;
			height: 16px;
			border-radius: 50%;
		}
		.swiper-container{
			overflow: visible;
		}
		.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
			bottom: -50px;
		}		
	</style>
</head>
	<body>
    <!-- Swiper -->
    <div class="jui-flexview">
	    <div class="jui-scrollview"> 
			 	<header class="jui-bar jui-barwhite" style="background: #FFFFFF;color: #2a2a2a;">
					<p class="iconfont fl" onclick="history.go(-1)">&#xe7e0;</p>
					<h1 class="title" style="color:#2a2a2a;">购买置换卡</h1>
				</header>	  	
		    <div class="swiper-container" style="margin-top: .6rem;">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide">
		            	<div class="juscar_slider">
		  					<div class="jusucarda">
		  						<img src="../../img/jusucard_03.png"/>
		  					</div>
		  					<div class="jusucardb">
		  						<img src="../../img/jusucardb_03.png"/>
		  					</div>
		            	</div>
		            </div>
		            <div class="swiper-slide">            
		            	<div class="juscar_slider">
		  					<div class="jusucarda">
		  						<img src="../../img/jusucard_05.png"/>
		  					</div>
		  					<div class="jusucardb">
		  						<img src="../../img/jusucardb_05.png"/>
		  					</div>
		            	</div>
		            </div>
		            <div class="swiper-slide">
		            	<div class="juscar_slider">
		  					<div class="jusucarda">
		  						<img src="../../img/jusucard_08.png"/>
		  					</div>
		  					<div class="jusucardb">
		  						<img src="../../img/jusucardb_08.png"/>
		  					</div>
		            	</div>            	
		            </div>
		        </div>
		        <div class="swiper-pagination"></div>
		    </div>
	     </div>
	     <a href="" class="bespeak_sure" style="background: #2A2A2A;">立即办理</a>
     </div>
   		<script src="../../js/jquery-3.1.1.js"></script>
		<script src="../../js/swiper.jquery.min.js"></script>
		<script>
	    var swiper = new Swiper('.swiper-container', {
	    	pagination: '.swiper-pagination',
	        effect: 'coverflow',
	        grabCursor: true,
	        centeredSlides: true,
	        slidesPerView: 'auto',
	        coverflow: {
	            rotate: 50,
	            stretch: 0,
	            depth: 100,
	            modifier: 1,
	            slideShadows : true
	        }
	    });	    
//	    $('.juscar_slider').click(function(){
//	    	$(this).removeClass('juscar_slider')
//	    })
	    $('.swiper-slide').click(function(){
	    	console.log(1)
	    	$(this).find('.juscar_slider').toggleClass('change')
	    })
		</script>
	</body>
</html>
